<template>
  <div class="flow-economy-container">
    <div class="header">
      <div class="icon-container ">
        <!--      <img :src="iconSrc" alt="Icon" class="icon" v-if="iconSrc">-->
        <div class="icon"></div>
      </div>
      <h3 style="color: rgba(38, 220, 220, 1);

font-family: '优设标题黑',serif;
font-size: 32px;
font-weight: 400;
line-height: 62px;
letter-spacing: 0px;
text-align: left;">{{ title }}</h3>
    </div>
    <div class="dfec-content">
      <p v-for="paragraph in content" :key="paragraph">
        {{ paragraph }}
      </p>
    </div>

    <div class="bottom-button-container-return" style="display: flex;justify-content: space-around;">

      <button type="submit" @click="returnToRegionalPublicBrand"
              class="return-button">
        <svg class="w-6 h-6 mr-2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
             height="24" fill="none" viewBox="0 0 24 24">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
        </svg>
        <span>返回</span>
      </button>

    </div>
  </div>

</template>

<script>
import { useRouter } from 'vue-router';

export default {
  name: 'DynamicFlowEconomyComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: Array,
      required: true
    }
  },
  setup() {
    const router = useRouter();

    // 新增返回函数
    const returnToRegionalPublicBrand = () => {
      router.push('/regionalPublicBrand');
    };

    return {
      returnToRegionalPublicBrand
    };
  }
};
</script>

<style scoped>
.flow-economy-container {
  height: 100%;
  width: 100%;
  background-color: #0a0f1b;
  color: #ffffff;
  padding: 20px;

  margin-right: 40px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  align-items: center;
  background: rgb(16, 37, 37);
  padding: 5px
}

.icon-container {
  position: relative;
  display: inline-block;
  width: 32px; /* 外圆直径 */
  height: 32px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 50%; /* 使外圆成为圆形 */
  border: 6px solid #00f2f2; /* 外圆的边框颜色和宽度 */
}


.icon {
  width: 12px; /* 内圆的直径 */
  height: 12px;
  background: linear-gradient(135deg, #00f2f2 0%, #00b6b6 100%); /* 内圆的颜色 */
  border-radius: 50%; /* 使内圆完美 */
  position: absolute; /* 绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中对齐 */
}
.dfec-content {
  padding: 10px 20px;
  border: 2.12px dashed rgba(162, 217, 218, 0.75);
  background: rgba(0, 49, 76, 0.75);
}

.dfec-content p {

  color: rgba(249, 254, 254, 1);
  text-indent: 2em; /* 首行缩进两个字符 */
  font-family: Noto Sans Arabic ExtraCondensed,serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 63px;
  letter-spacing: 0px;
  text-align: left;
}
</style>
